<template>
  <div class="home-container">
    <div class="header">
      <van-button
        class="header-btn"
        block
        round
        type="primary"
        icon="sousuo"
        icon-prefix="iconfont"
      >搜索
      </van-button>
    </div>
    <div class="content">
      <div class="selcet-icon iconfont iconfont-gengduo" @click="editChannelsShow = !editChannelsShow"></div>
      <van-tabs v-model="active">
        <van-tab
          v-for="(channel, index) in channels"
          :key="index"
          :title="channel.name"
        >
          <Articles :channelId="channel.id"></Articles>
        </van-tab>
        <!-- 占位项 -->
        <van-tab class="select" disabled></van-tab>
      </van-tabs>
    </div>
    <!-- 频道编辑页面 -->
    <EditChannels
      :show.sync="editChannelsShow"
      :channels.sync="channels"
      :active.sync="active"
    >
    </EditChannels>
  </div>
</template>

<script>
import { requestUserChannels } from '@/api/home.js'
import { getStorage } from '@/utils/storage.js'
import Articles from './components/articles'
import EditChannels from './components/editChannels'
const USERCHANNELS = 'userChannels'
export default {
  name: 'Home',
  components: {
    Articles,
    EditChannels
  },
  data () {
    return {
      // 绑定当前选中标签的标识符
      active: 0,
      // 用户频道
      channels: [
        { id: 0, name: '推荐' },
        { id: 11, name: '后端' },
        { id: 12, name: 'linux' },
        { id: 13, name: '人工智能' }
      ],
      editChannelsShow: true
    }
  },
  // mounted () {
  //   this.getUserChannels()
  // },
  created () {
    this.getUserChannels()
  },
  methods: {
    async getUserChannels () {
      try {
        const storageChannels = getStorage(USERCHANNELS)
        if ((!this.$store.state.userToken) && storageChannels) {
          // 如果用户没有登录且localStorage存储有频道
          this.channels = storageChannels
        } else {
          // 登录就拿取线上的频道
          const { data } = await requestUserChannels()
          // console.log(data)
          this.channels = data.data.channels
        }
      } catch (err) {
        console.log(err, '错了啊')
      }
    }
  }
}

</script>
<style scoped lang="less">
.header {
  padding: 6px 49px;
  background-color: #3296fa;
  .header-btn {
    height: 32px;
    font-size: 14px;
    background-color: #5babfb;
    border: none;
    color: #fff;
    /deep/ .iconfont {
      font-size: 16px;
    }
  }
}
.content {
  position: relative;
  .selcet-icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 33px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    opacity: .9;
    font-size: 16px;
    color: #333;
    &::after {
      position: absolute;
      left: 0;
      top: 0;
      content: ' ';
      width: 1px;
      height: 100%;
      background: url('./img/bgc.png') no-repeat center;
      background-size: 100% 80%;
    }
  }
  /deep/ .van-tabs__wrap {
    height: 41px;
    .van-tabs__nav {
      position: relative;
      padding: 0 5px;
      &::after {
        content: ' ';
        position: absolute;
        bottom: -1px;
        right: 0;
        width: 100%;
        height: 1px;
        background-color: #EDEFF3;
        transform: scaleY(.5);
      }
      .van-tab {
        position: relative;
        width: 95px;
        height: 41px;
        &::after {
          content: ' ';
          position: absolute;
          top: 0;
          right: 0;
          width: 1px;
          height: 100%;
          background-color: #EDEFF3;
          transform: scaleX(.5);
        }
        // 占位元素
        &:nth-last-child(2) {
          width: 33px;
          &::after {
            width: 0;
          }
        }
      }
      .van-tabs__line {
        width: 16px;
        height: 3px;
        bottom: 4px;
        background-color: #3296FA;
      }
    }
  }
  /deep/ .van-tabs__content {
    position: fixed;
    top: 86px;
    right: 0;
    left: 0;
    bottom: 50px;
    height: calc(100% - 135px);
    overflow-y: auto;
  }
}
</style>
